<script lang="ts" setup>
withDefaults(
  defineProps<{
    // 父目录名字
    parentName: string
    // 父目录跳转地址
    parentPath: string
  }>(),
  {
    parentName: '',
    parentPath: ''
  }
)
</script>

<template>
  <div class="xtx-bread">
    <div class="xtx-bread-item">
      <RouterLink to="/">首页</RouterLink>
    </div>
    <i class="iconfont icon-angle-right"></i>
    <div class="xtx-bread-item" v-if="parentName">
      <RouterLink v-if="parentPath" :to="parentPath">
        {{ parentName }}
      </RouterLink>
      <span v-else>{{ parentName }}</span>
    </div>
    <i v-if="parentPath" class="iconfont icon-angle-right"></i>
    <div class="xtx-bread-item">
      <span><slot /></span>
    </div>
  </div>
</template>

<style scoped lang="less">
.xtx-bread {
  display: flex;
  padding: 25px 10px;
  &-item {
    a {
      color: #666;
      transition: all 0.4s;
      &:hover {
        color: @xtxColor;
      }
    }
  }
  i {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
  }
}
</style>
<!-- <template>
  <XtxBread />
</template>
<script setup lang="ts">
import { h } from 'vue'
const XtxBread = {
  render() {
    console.log(this)
    return h('div', null, '123')
  }
}
// export default XtxBread
</script>

<style lang="less" scoped></style> -->
